<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="./ajax.js"> </script>
</head>
<body>
	<div id="area">
		<select name="prov" id="prov"></select><select name="city" id="city"></select>
		<select name="qx" id= "qx"></select>
	</div>
	<script>
		var prov = document.getElementById("prov");
		var city = document.getElementById("city");
		var qx  =document.getElementById("qx");
		post("doarea.php","id=1",function(res){
			var datas = eval("("+res+")");
			var str ="";
			for(var i in datas){
				str+="<option value="+datas[i]["id"]+">";
				str+=datas[i]['name'];
				str+="</option>";
			}
			prov.innerHTML =str;

		},false);
		//根据默认选中的省，遍历市级信息
		var provid = prov.value;
		post("doarea.php","id="+provid,function(res){
			var datas = eval("("+res+")");
			var str ="";
			for(var i in datas){
				str+="<option value="+datas[i]["id"]+">";
				str+=datas[i]['name'];
				str+="</option>";
			} 
			 city.innerHTML =str;

		},false) 
		//根据默认选中的市，遍历区县信息
		var cityid = city.value;
		post("doarea.php","id="+cityid,function(res){
			var datas = eval("("+res+")");
			var str ="";
			for(var i in datas){
				str+="<option value="+datas[i]["id"]+">";
				str+=datas[i]['name'];
				str+="</option>";
			} 
			 qx.innerHTML =str;
 
		},false) 

		prov.onchange = function(){
			//选中省份的id
			var val =this.value;
			post("doarea.php","id="+val,function(res){
				var datas =eval("("+res+")");
				var str ="";
				for( var i in datas){
					str+="<option value="+datas[i]["id"]+">";
					str+=datas[i]['name'];
					str+="</option>";
				}
				city.innerHTML =str;
			},false);



			//根据默认选中的城市，出现区县信息
			var cityid = city.value;
			post("doarea.php","id="+cityid,function(res){
				var datas =eval("("+res+")");
				var str ="";
				for( var i in datas){
					str+="<option value="+datas[i]["id"]+">";
					str+=datas[i]['name'];
					str+="</option>";
				}
				qx.innerHTML =str;
			})
		}

		city.onchange = function(){
			var val = this.value;
			post("doarea.php","id="+val,function(res){
				var datas =eval("("+res+")");
				var str ="";
				for( var i in datas){
					str+="<option value="+datas[i]["id"]+">";
					str+=datas[i]['name'];
					str+="</option>";
				}
				qx.innerHTML =str;
			})
		}
	</script>
	
</body>
</html>